import React , { useState, useEffect }from 'react'

export default function hookState() {
  const [count , setCount] = useState(0);
  const [name , setName] = useState('Jack');
  
  // 模拟class  componentDidMount 和 componentDidUpdate
  // useEffect(() => {
  //   document.title = `hook useEffect ${count?count: ''} time`
  // })

  //模拟class  componentDidMount 
  useEffect(() => {
    console.log(`加载完成`)
    document.title = `hook useEffect ${count?count: ''} time`
  }, [])

  //模拟class  componentDidUpdated 第二个参数是更新依赖 只有数组中的state值有更新 才会执行函数操作
  useEffect(() => {
    console.log(`更新了`)
    document.title = `hook useEffect ${count?count: ''} time`
  }, [name])
  
  // 模拟class  componentWillUnmount
  useEffect(() => {
    console.log(`更新了`)
    document.title = `hook useEffect ${count?count: ''} time`
    return () => {
      console.log(`willUnmount`)
    }
  }, [])

  return (
    <div className='hook-state'>
      <p>{count} : {name}</p>
      <button onClick={() => setCount(count + 1)}>changeNumber</button>
    </div>
  )
}